<template>
    <l-page class="block pb-3">
        <l-navbar title="家装分期" />
        <u-image :src="$imgUrl + '600/150'" width="100%" height="150"></u-image>
        <view class="m-3 !-mt-6 bg-blue-100 rounded-xl pb-1 relative">
            <l-tab :list="['产品介绍', '准入要求']" v-model="tab"></l-tab>
            <view class="m-3 bg-gray-100 rounded-sm p-3 text-gray-500" v-if="tab == 0">
                <view>
                    "家装分期"是信用贷款的一种细分类别，是指以借款人的信用发放的、定向使用于住房(拨揭或全款皆可)硬装或软装的贷款。其特征就是债务人无需提供抵押品或第三方担保，仅凭自己的信誉及住房条件就能取得贷款，并以借款人的信用程度作为还款保证,
                </view>
                <view>
                    产品优势:
                </view>
                <view>1、最长10年还款，最高100万额度，利率低至3.2%，还款方式多样化、灵活化。</view>
                <view>2、提供资料简单，从申请签约到放款最快3个工作日</view>
            </view>
            <view class="m-3 bg-gray-100 rounded-sm p-3 text-gray-500" v-if="tab == 1">
                <view>1、18-65周岁大陆户籍居民</view>
                <view>2、信用评分达到480分，如未达到则需满足</view>
                <view>以下条件之-:</view>
                <view class="pl-3">(1)连续1年缴纳社保/公积金/个税，且年收入6万元以上</view>
                <view class="pl-3">(2)公务员或事业单位正式在编人员</view>
                <view class="pl-3">(3)入伍满1年且持有军官证、干部证的军官等</view>
                <view class="pl-3">(4)世界排名前100名大学全日制本科及以上学历，且在本地有固定工作</view>
                <view>3、借款人征信良好</view>
            </view>
        </view>
        <view class="panel !mb-20">
            <view class="text-lg">申请流程</view>
            <view class=" step">
                <view class="item">
                    <view class="icon">
                        <u-image src="@/assets/img/zixunshoujipeizhi.png" width="32" height="32"></u-image>
                    </view>
                    <view class="text-lg">收集资料</view>
                </view>
                <view class="item">
                    <view class="icon">
                        <u-image src="@/assets/img/tijiao-.png" width="32" height="32"></u-image>
                    </view>
                    <view class="text-lg">提交申请</view>
                </view>
                <view class="item">
                    <view class="icon">
                        <u-image src="@/assets/img/shenpi.png" width="32" height="32"></u-image>
                    </view>
                    <view class="text-lg">银行审批</view>
                </view>
                <view class="item">
                    <view class="icon">
                        <u-image src="@/assets/img/qianding.png" width="32" height="32"></u-image>
                    </view>
                    <view class="text-lg">签订合同</view>
                </view>
                <view class="item">
                    <view class="icon">
                        <u-image src="@/assets/img/shenpi.png" width="32" height="32"></u-image>
                    </view>
                    <view class="text-lg">上门实勘</view>
                </view>
                <view class="item">
                    <view class="icon">
                        <u-image src="@/assets/img/weibiaoti5.png" width="32" height="32"></u-image>
                    </view>
                    <view class="text-lg">发放贷款</view>
                </view>
                <view class="item">
                    <view class="icon">
                        <u-image src="@/assets/img/guanli.png" width="32" height="32"></u-image>
                    </view>
                    <view class="text-lg">贷后管理</view>
                </view>
            </view>
        </view>
        <view class="fixed bottom-0 left-0 right-0 flex p-2 bg-white items-center">
            <view class="">
                <u-icon name="kefu-ermai" size="24"></u-icon>
            </view>
            <view class="flex flex-1 ml-3 rounded-full overflow-hidden">
                <navigator url="/pages/renovation/quota-calculation" class="flex-1">
                    <l-button type="warning" custom-style="border-radius:0px">额度测算</l-button>
                </navigator>
                <navigator url="/pages/credit-loans/loan-application" class="flex-1">
                    <l-button type="error" custom-style="border-radius:0px">立即定制</l-button>
                </navigator>
            </view>
        </view>
    </l-page>
</template>

<script setup lang="ts">
import { ref } from 'vue';

let tab = ref(0)
</script>

<style lang="scss" scoped>
.step {
    @apply items-start flex flex-col;

    .item {
        @apply flex items-center h-20 overflow-hidden;

        .icon {
            @apply bg-blue-50 border-2 border-blue-400 rounded-[50%] w-12 h-12 flex items-center justify-center mr-2 relative;

            &:before,
            &:after {
                content: '';
                @apply block w-[2rpx] absolute left-1/2 -ml-[1rpx] h-5 bg-blue-400;
            }

            &:before {
                @apply bottom-full;
            }

            &:after {
                @apply top-full;
            }
        }

        &:first-child {
            .icon {
                &:before {
                    display: none;
                }
            }
        }

        &:last-child {
            .icon {
                &:after {
                    display: none;
                }
            }
        }
    }
}
</style>